<template>
  <div class="main">
    <h2>城市列表</h2>
    <div>
      <van-index-bar
        :sticky="true"
        highlight-color="#ee0a24"
        :index-list="indexList"
      >
        <template v-for="(value, key, index) in cityArr">
          <van-index-anchor
            :index="key"
            class="title"
            style="background-color: #eee"
            >{{ key }}</van-index-anchor
          >
          <van-cell
            v-for="item in value"
            :key="item.id"
            :title="item.name"
            @click="select(item.name)"
          />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import city from "@/utils/selectCity.js";
export default {
  name: "SelectCity",
  data() {
    return {
      cityArr: "",
      indexList: "",
    };
  },
  methods: {
    select(city) {
      // console.log(city);
      //首先要获取当前城市名称 然后把值传给首页，再跳转到首页
      //因为其他页面可能还要调用，所以存localStorage 比较合适
      localStorage.setItem("city", city);
      this.$router.push("/");
      document.documentElement.scrollTop = 0;
    },
  },
  created() {
    this.cityArr = city.citylist;
    this.indexList = Object.keys(this.cityArr);
    // console.log(this.indexList);
  },
};
</script>

<style lang="less" scoped>
.main {
  // padding: 0 0.2rem;
  background-color: #eee;
}
.selectCity {
  background-color: #f5f5f5;
  .title {
    padding: 0.2rem;
  }
}
</style>